<template>
  <div>
    <card :isCustomHeader="true">
      <template #header>
        <t-breadcrumb :maxItemWidth="'150'">
          <t-breadcrumbItem>企业管理</t-breadcrumbItem>
          <t-breadcrumbItem @click="$router.push('/business-management/role')">角色</t-breadcrumbItem>
          <t-breadcrumbItem><b>添加角色</b></t-breadcrumbItem>
        </t-breadcrumb>
        <t-space>
          <t-button @click="save(0)" theme="default" variant="outline">取消</t-button>
          <t-button @click="save(1)">保存</t-button>
        </t-space>
      </template>
      <template>
        <div class="form">
          <t-form labelAlign="top" :data="formData" style="width: 40vw">
            <t-form-item label="角色名称" clearable showClearIconOnEmpty requiredMark>
              <t-input v-model="formData.name" placeholder="请输入角色名称"></t-input>
            </t-form-item>
            <t-form-item label="所属企业" requiredMark>
              <t-select v-model="formData.companyId" :options="companyOptions" />
            </t-form-item>
            <t-form-item label="权限分配">
              <t-checkbox-group v-model="formData.permission">
                <t-checkbox value="1">企业管理</t-checkbox>
                <t-checkbox value="2">风险评估</t-checkbox>
                <t-checkbox value="3">数据发现</t-checkbox>
                <t-checkbox value="4">App隐私合规</t-checkbox>
                <t-checkbox value="5">合规培训</t-checkbox>
                <t-checkbox value="6">合规智库</t-checkbox>
                <t-checkbox value="7">企业风险感知</t-checkbox>
                <t-checkbox value="8">供应链风险管理</t-checkbox>
              </t-checkbox-group>
            </t-form-item>

            <t-form-item label="描述">
              <t-textarea v-model="formData.description" placeholder="请输入备注内容" />
            </t-form-item>
          </t-form>
        </div>
      </template>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card/index.vue';
import { getEnterpriseInfo } from '@/service/business-management/business-info';
import { addRole } from '@/service/business-management/role/index';

// import { addRole } from "@/service/business-management/role/index";

const INITIAL_DATA = {
  name: '',
  companyId: '',
  permission: [],
  description: '',
};
export default {
  components: {
    Card,
  },
  data() {
    return {
      formData: { ...INITIAL_DATA },
      companyOptions: [],
      roleOptions: [
        { label: '超级管理员', value: '1' },
        { label: '管理员', value: '2' },
        { label: '用户', value: '3' },
      ],
    };
  },
  mounted() {
    this.getAllCompany();
  },
  methods: {
    // 保存
    async save(val) {
      // todo
      if (val) {
        const { description, name, companyId, permission } = this.formData;
        if (!name || !companyId) {
          this.$message.warning('填写');
          return;
        }
        const roleDTO = {
          description,
          name,
          permission,
          orgId: companyId,
          roleList: [],
        };
        const res = await addRole(roleDTO);
        if (res?.code === 200) {
          this.$message.success('保存成功');
          this.$router.replace('/business-management/role');
        }
      } else this.$router.replace('/business-management/role');
    },
    // 获取所以企业信息
    async getAllCompany() {
      const res = await getEnterpriseInfo();
      this.companyOptions = res.data.map((item) => ({
        label: item.name,
        value: item.id,
      }));
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  display: flex;
  justify-content: center;
  padding-bottom: 340px;
}
</style>
